<template>
    <el-container class="Main" style=" border: 1px solid #eee">
        <el-header style="display: none"></el-header>
        <HeaderComponent></HeaderComponent>
        <el-container>
            <el-aside width="auto" style="background-color: #0C6D95" class="aside_list">
                <el-menu :default-active="onRoutes" class="el-menu-vertical-demo"
                         @select="handleSelect" unique-opened>
                    <!--<el-menu-item index="readme">-->
                    <!--<i class="el-icon-setting"></i>自述-->
                    <!--</el-menu-item>-->
                    <template v-for="menu in menus">
                        <template v-if="menu.isLeaf">
                            <el-menu-item :index="menu.menuId">
                                <i class="iconfont" :class="menu.iconCls==null?'el-icon-setting':menu.iconCls"></i>
                                <span>{{menu.menuName}}</span>
                            </el-menu-item>
                        </template>
                        <template v-else>
                            <el-submenu :index="menu.menuId">
                                <span slot="title">
                                    <i class="iconfont"
                                       :class="menu.iconCls==null?'el-icon-setting':menu.iconCls"></i>
                                    <span>{{menu.menuName}}</span>
                                </span>
                                <template v-for="child in menu.children">
                                    <template v-if="child.isLeaf">
                                        <el-menu-item :index="child.menuId">
                                            <!--<i :class="child.iconCls==null?'el-icon-setting':child.iconCls"></i>-->
                                            <span>{{child.menuName}}</span>
                                        </el-menu-item>
                                    </template>
                                    <template v-else>
                                        <el-submenu :index="child.id">
                                            <span slot="title">{{child.menuName}}</span>
                                            <template v-for=" three in child.children">
                                                <el-menu-item class="three_item" :index="three.menuId">
                                                    <!--<i :class="child.iconCls==null?'el-icon-setting':child.iconCls"></i>-->
                                                    <span>{{three.menuName}}</span>
                                                </el-menu-item>
                                            </template>
                                        </el-submenu>
                                    </template>
                                </template>
                            </el-submenu>
                        </template>
                    </template>
                </el-menu>
            </el-aside>
            <el-main class="main_bg">
                <!--<transition name="move" mode="out-in">-->
                <router-view></router-view>
                <!--</transition>-->
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
  import { mapGetters } from 'vuex'
  import HeaderComponent from './Header.vue'

  export default {
    components: {
      HeaderComponent
    },
    data () {
      let set = new Set()
      return {
        menus: [],
        navTitles: set,
        treeLevel: 0
      }
    },
    created () {
      this.getMenus('')
    },
    computed: {
      ...mapGetters(['menuStatus']),
      userName () {
        let userName = localStorage.getItem('userName')
        return userName ? userName : ''
      },
      onRoutes () {
        return this.$route.path.replace('/', '')
      }
    },
    methods: {
      getMenus (id) {
        let self = this
        self.$axios
          .post('commonRest/menuAllTreeWithRole', {
            id: id
          })
          .then(response=> {
              self.menus = response.data
          })
      },
      getMenuById (menuId) {
        let self = this
        let index = self.menus.findIndex(e => e.menuId === menuId)
        if (index < 0) {//查找第二级菜单
          for (let i = 0; i < self.menus.length; i++) {
            let index = self.menus[i].children.findIndex(e => e.menuId === menuId)
            if (index >= 0) {
              self.treeLevel = 2
              return self.menus[i].children[index]
            } else {//查找第三级
              for (let j = 0; j < self.menus[i].children.length; j++) {
                let two = self.menus[i].children[j]
                let index = two.children.findIndex(e => e.menuId === menuId)
                console.log(index)
                if(index>=0){
                  self.treeLevel = 3
                  return two.children[index]
                }
              }
            }
          }
        } else {
          return self.menus[index]
        }
      },
      handleSelect (id, indexPath) {
        let parent,child;
        let self = this
        let menu = this.getMenuById(id)
        if (menu.routerPath) {
          console.log('menu.routerPath', menu.routerPath)
          this.$router.push('/' + menu.routerPath)
          if (!this.navTitles.has(menu.menuName)) {
            localStorage.removeItem('node')
            localStorage.removeItem('parent')
            localStorage.removeItem('child')
            // localStorage.setItem('node', menu.menuName)
            // if (menu.parentId != null) {
            //   let parent = this.getMenuById(menu.parentId)
            //   localStorage.setItem('parent', parent.menuName)
            // }
          }
          switch (self.treeLevel) {
            case 0:
              localStorage.setItem('node', menu.menuName)
              break
            case 1:
              localStorage.setItem('node', menu.menuName)
              break
            case 2:
              localStorage.setItem('node', menu.menuName)
              parent = self.getMenuById(menu.parentId)
              localStorage.setItem('parent', parent.menuName)
              break
            case 3:
              localStorage.setItem('child', menu.menuName)
              parent = self.getMenuById(menu.parentId)
              localStorage.setItem('node', parent.menuName)
              child = self.getMenuById(parent.parentId)
              localStorage.setItem('parent', child.menuName)
              break
          }
        }
      }
    }
  }
</script>
<style lang="scss">
    .Main {
        .aside_list > .el-menu--collapse {
            width: auto;
        }
        /*左边导航图标样式*/
        .aside_list .iconfont {
            font-size: 20px;
            color: #fff;
        }
        .aside_list > ul {
            height: 100%;
            background-color: #0C6D95;
            text-align: left;
        }
        .aside_list li ul {
            background-color: #0b506c;
        }
        .aside_list .el-submenu__title, .aside_list .el-menu-item, .aside_list .el-submenu__title i {
            color: #fff;
        }
        .el-header {
            position: relative;
            z-index: 9;
            background-color: white;
            box-shadow: 0px 0px 17px -2px #3c3c3c;
            color: #333;
            line-height: 60px;
            .logo img {
                margin-top: -3px;
            }
            .header_txt {
                position: absolute;
                top: 8px;
                left: 50%;
                margin-left: -100px;
            }
            .icon-xiala {
                color: #d32f2f;
                font-size: 15px;
                margin: 2px 20px 0 2px;
            }
            .user_name {
                font-size: 14px;
            }
            .icon-tuichu {
                color: #d32f2f;
                font-size: 18px;
                font-weight: bold;
            }
        }

        .el-aside {
            color: #333;
        }

        .el-main {
            width: 100%;
        }
        .aside_list {
            .el-submenu__title:hover, .el-menu-item:hover, .el-menu-item:focus {
                background-color: #0091ce;
            }
        }
        .main_bg .ms-doc{max-width: initial;}
        .main_bg .ms-doc h3{border:none;}
        .el-menu-item.three_item{
            background: #053d54;
        }
    }
</style>